
<template>
  <div class="app-container">
    <Row>
      <Modal
        v-model="form.show"
        :mask-closable="false"
        title="表单历史版本"
        width="70%"
        :transfer="false"
      >
        <div>

          <el-form ref="form" :model="form" style="display: block">
            <el-form-item label="版本" prop="versionData">
              <el-checkbox-group v-model="form.checkdData">
                <el-checkbox v-for="(item,index) in form.versionData" :key="item.id" :label="item.id">{{ item.version }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>

        </div>
        <div slot="footer">
          <Button @click="handleReset('informed')">取消</Button>
          <Button type="primary" @click="informedHandler">确定</Button>
        </div>
      </Modal>

      <Col span="4" style="background-color:white;">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask" />
      </Col>
      <Col span="20" style="background-color:white;">
        <Card dis-hover class="task-card">
          <div class="app-container" style="background-color:white;">

            <el-row type="flex" justify="start">

              <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="mini">

                <el-form-item label="类型">
                  <el-select v-model="queryForm.formType" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in formTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>

                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="queryForm.status" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>

                </el-form-item>
                <el-form-item label="名称">
                  <el-input v-model="queryForm.name" clearable />
                </el-form-item>
                <el-form-item label="别名">
                  <el-input v-model="queryForm.formKey" clearable />
                </el-form-item>
                <el-form-item style="margin-left: 56px">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <el-button type="primary" size="mini" @click="add">新增</el-button>
            <el-row style="margin-top: 10px">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    fixed
                    prop="name"
                    label="名称"
                    width="180"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="formKey"
                    label="别名"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="formType"
                    label="类型"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="status"
                    label="状态"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">

                      <el-tag v-if="(scope.row.status==='deploy') " type="success">  发布</el-tag>
                      <el-tag v-else type="warning"> 草稿</el-tag>

                    </template>

                  </el-table-column>
                  <el-table-column
                    prop="groupName"
                    label="分组"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="version"
                    label="版本号"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                  >
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleClick(scope.row)">编辑</el-button>
                      <el-button size="mini" type="text" icon="el-icon-setting" @click="handleDelClick(scope.row)">版本</el-button>
                      <el-button size="mini" type="text" icon="el-icon-loading" @click="updateClick(scope.row)">更新</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </div>
        </Card>
      </Col>

    </Row>
  </div>

</template>

<script>
import { getTaskData, getTaskChartData, getBpmnModelCategory } from '@/api/analy'
import { getTypesByKey, getBusinessTableListJson, businessTableDel, getFormModelTableListJson, updateFormModel, getFormModelVersion } from '@/api/form'

export default {
  name: 'Task',
  components: {
  },

  data() {
    return {
      formTypeOptions: [{
        value: 'pc',
        label: 'pc'
      }, {
        value: 'mobile',
        label: '移动端'
      }],
      statusOptions: [{
        value: 'draft',
        label: '草稿'
      }, {
        value: 'deploy',
        label: '发布'
      }],
      form: {
        show: false,
        formKey: '',
        isIndeterminate: true,
        checkAll: false,
        versionData: [],
        checkdData: []
      },
      tableData: [],
      modelerSrc: '',
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      queryForm: {
        groupId: '',
        formType: '',
        formKey: '',
        name: '',
        status: '',
        page: 0,
        limit: 10
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    this.initData()
  },
  methods: {
    handleReset: function() {
      this.form.checkdData = []
      this.form.show = false
    },

    informedHandler: function() {
      updateFormModel({ ids: this.form.checkdData, formKey: this.form.formKey }).then((response) => {
        if (response.code == 0) {
          this.$message({ 'duration': '800', message: '操作成功', type: 'success', customClass: 'zZindex' })
          this.handleReset()
        }
      })
    },
    handleCheckAllChange(val) {
      // this.form.versionData = val ? this.form.versionData  : [];
      // this.form.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // let checkedCount = value.length;
      // this.form.checkAll = checkedCount === this.form.versionData.length;
      // this.form.isIndeterminate = checkedCount > 0 && checkedCount < this.form.versionData.length;
    },
    add: function() {
      this.$router.push({ name: 'formModelerIndex', query: { t: new Date().getTime(), 'operate': 'inner' }})
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      if (data[0].parentId == '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.getData()
    },
    queryMethod: function() {
      this.getData()
    },
    getTypesByKeyAction: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData: function() {
      this.getTypesByKeyAction()
      this.getData()
    },
    getData: function() {
      getFormModelTableListJson(this.queryForm).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'formModeler', query: { t: new Date().getTime(), 'id': data.id }})
    },
    handleDelClick(data) {
      this.$router.push({ name: 'formVersionManager', query: { t: new Date().getTime(), 'modelKey': data.formKey }})
    },
    updateClick(data) {
      var formKey = data.formKey

      this.form.formKey = formKey
      getFormModelVersion(formKey).then((response) => {
        if (response.code == 0) {
          this.form.versionData = response.data
        }
      })

      this.form.show = true
    },
    search() {
      this.queryForm.page = 0
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.createTime = ''
      this.queryForm.formKey = ''
      this.queryForm.formType = ''
      this.queryForm.status = ''
      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
